<template>
  <div class="event_total">
    <event-details :isShow="dialogFormVisible1" @close1="closeDialog1"></event-details>
    <el-dialog
      title="事件列表"
      :visible.sync="dialogFormVisible"
      :modal-append-to-body="false"
      v-if="dialogFormVisible"
    >
      <div class="dialog_input">
        <el-form :model="form">
          <el-row :gutter="2">
            <el-col :span="6">
              <el-form-item label="" prop="zgcmc">
                <el-select v-model="form.name" placeholder="社会矫正人员">
                  <el-option label="电商化采购" value="1"></el-option>
                  <el-option label="合同" value="2"></el-option>
                  <el-option label="生效的采购供货单" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" prop="zgcmc">
                <el-select v-model="form.name" placeholder="组织结构">
                  <el-option label="电商化采购" value="1"></el-option>
                  <el-option label="合同" value="2"></el-option>
                  <el-option label="生效的采购供货单" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" prop="zhtbh">
                <el-input placeholder="重点管理人员姓名" v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="margin-top:0;">
                <el-button type="info">查 询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="tableBox test-1">
          <el-table :data="tableData" style="width:100%" stripe v-loading="tableLoading">
            <el-table-column type="index" label="序号" width="90" :index="indexSort" align="center"></el-table-column>
            <el-table-column prop="qu" label="标题" width="123" show-overflow-tooltip align="center">
              <template slot-scope="scope">
                <a @click="handleWorkClick(scope.row)" style="color:#1AB394;">{{scope.row.qu}}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="jiedao"
              label="状态"
              width="123"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column prop="sfz" label="类型" width="110" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column
              prop="xm"
              label="事件来源"
              width="110"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column prop="xb" label="发生地" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="mz" label="发生时间" show-overflow-tooltip align="center"></el-table-column>
          </el-table>
          <el-pagination
            background=""
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-size="size"
            layout="total,sizes,prev,pager,next,jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
    <div class="event_num flex_c">
      <div class="event_num_text flex">
        <!-- <div class="event_num_text_border" v-for="(item,index) in eventNumber" :key="index">{{item}}</div> -->
        <div class="box-item">
          <li
            :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
            v-for="(item,index) in orderNum"
            :key="index"
          >
            <span v-if="!isNaN(item)">
              <i ref="numberItem">0123456789</i>
            </span>
            <span class="comma" v-else>{{item}}</span>
          </li>
        </div>
      </div>
      <div class="event_total">
        <span>事件总数</span>
      </div>
      <div class="event_compent">
        <div class="event_compent_ flex_c">
          <span class="e_c">已完成</span>
          <div class="evevt_ box-item">
            <li
              :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
              v-for="(item,index) in orderNum1"
              :key="index"
            >
              <span v-if="!isNaN(item)">
                <i ref="numberItem1">0123456789</i>
              </span>
              <span class="comma" v-else>{{item}}</span>
            </li>
          </div>
        </div>
        <div class="event_compent_ flex_c">
          <span class="e_c">已处理</span>
          <div class="evevt_ box-item">
            <li
              :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
              v-for="(item,index) in orderNum2"
              :key="index"
            >
              <span v-if="!isNaN(item)">
                <i ref="numberItem2">0123456789</i>
              </span>
              <span class="comma" v-else>{{item}}</span>
            </li>
          </div>
        </div>
        <div class="event_compent_ flex_c">
          <span class="e_c">待受理</span>
          <div class="evevt_ box-item">
            <li
              :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
              v-for="(item,index) in orderNum3"
              :key="index"
            >
              <span v-if="!isNaN(item)">
                <i ref="numberItem3">0123456789</i>
              </span>
              <span class="comma" v-else>{{item}}</span>
            </li>
          </div>
        </div>
      </div>
    </div>
    <div class="event_chart flex_b">
      <div class="event_chart_pie" id="echarts_pie">
        <dv-decoration-9 style="width:94%;margin:auto;height:2.18rem;color:#FFF;font-size:0.2rem;text-align:center;line-height:0.25rem;">{{success}}<br/>完成率</dv-decoration-9>
      </div>

      <div class="event_chart_bar" id="echarts_bar">

      </div>
    </div>
    <div class="event_type flex">
      <div class="event_type_left">
        <div class="event_type_left_title">
          <img src="../assets/sj.png" alt="">
          <span>事件类型</span>
          <span>37</span>
        </div>
        <div class="event_type_left_text">
          <vue-seamless-scroll :data="list" :class-option="classOption" class="table-content">
            <div class="event_type_left_text_ flex_b" v-for="(item,index) in list" :key="index">
              <span>{{item.name}}</span>
              <span>{{item.value}}</span>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="event_type_right">
        <div class="event_type_right_ flex_b" v-for="(item,index) in arrList" :key="index">
          <span>{{item.name}}</span>
          <span>{{item.value}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import echartsLiquidfill from "echarts-liquidfill";
import echartMixins from "@/utils/resizeMixins";
import eventDetails from "@/components/eventDetails";
import { EventNumber, WGstatistical, tableDates } from "@/api/index.js";
// import { log } from 'util';
const echarts = require("echarts");
export default {
  data() {
    return {
      success: "",
      dataNum: [],
      dataCalendar: [],
      activeTab: 1,
      form: {
        name: "",
        region: "",
      },
      tableData: [
        {
          qu: "斗殴",
          jiedao: "受理中",
          sfz: "城市管理",
          xm: "网络员上报",
          xb: "和平路社区第一网格",
          mz: "2020-01-02",
        },
      ],
      arrList: [],
      classOption: {
        singleHeight: 57,
        step: 1,
        switchDelay: 100,
        hoverStop: true,
      },
      list: [],
      // { title: '城市管理事件', text: '1234' },
      // { title: '婚恋家庭', text: '20000' },
      // { title: '邻里事件', text: '10000' },
      // { title: '人格权', text: '1200' },
      // { title: '城市管理事件', text: '1234' },
      // { title: '婚恋家庭', text: '20000' },
      // { title: '邻里事件', text: '10000' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '120' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      // { title: '人格权', text: '1200' },
      orderNum: ["0", "0", "0", "0", "0", "0"], // 默认订单总数
      orderNum1: ["0", "0", "0", "0", "0", "0"],
      orderNum2: ["0", "0", "0", "0", "0", "0"], // 默认订单总数
      orderNum3: ["0", "0", "0", "0", "0", "0"],
      chart1: null,
      chart2: null,
      timer: null,
      timer1: null,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      current: 1,
      size: 10,
      formLabelWidth: 100,
      tableLoading: false,
      total: 100,
      a: null,
      b: null,
      c: null,
      d: null,
      dd: ["11", "12", "13"],
    };
  },
  components: {
    eventDetails,
  },
  mixins: [echartMixins],
  mounted() {
    this.eventType();
    this.WGstatisticals();
    // let self = this;
    // this.chart1 = echarts.init(document.getElementById("echarts_pie"));
    this.chart2 = echarts.init(document.getElementById("echarts_bar"));
    //  this.drawPie();
    this.eventNumber();
    this.eventNum();
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); //关闭
    }
    if (this.timer1) {
      clearInterval(this.timer1); //关闭
    }
  },
  methods: {
    async eventType() {
      try {
        const { data } = await tableDates();
        console.log(data);
        this.list = data.date.typeCountData;
      } catch (error) {
        console.log(error);
      }
    },
    async WGstatisticals() {
      try {
        const { data } = await WGstatistical();
        console.log(data.date);
        this.arrList = data.date;
        console.log(this.arrList);
      } catch (error) {
        console.log(error);
      }
    },
    async eventNumber() {
      let dataCalendar=[];
      let dataNum=[];
      try {
        const { data } = await EventNumber();
        // console.log(data)
        this.a = parseInt(data.date.eventCount);
        this.b = parseInt(data.date.solved);
        this.c = parseInt(data.date.processing);
        this.d = parseInt(data.date.pending);
        this.success =
          parseInt(
            (parseInt(data.date.solved) / parseInt(data.date.eventCount)) * 100
          ) + "%";
        // console.log(this.success);
        data.date.mapData.forEach((item) => {
         dataCalendar.push(item.name);
         dataNum.push(parseInt(item.value));
        });
         this.drawBar(dataCalendar,dataNum);
        // console.log(this.dataCalendar,this.dataNum);
      } catch (error) {
        console.log(error);
      }
      let self = this;
      this.time1 = setTimeout(() => {
        //总事件数
        self.toOrderNum(this.a);
        //已完成
        self.toOrderNum1(this.b); // 这里输入数字即可调用
        // 待受理
        self.toOrderNum2(this.c); // 这里输入数字即可调用
        self.toOrderNum3(this.d); // 这里输入数字即可调用
      }, 500);
    },
    closeDialog1() {
      this.dialogFormVisible1 = true;
    },
    handleWorkClick() {
      this.dialogFormVisible1 = true;
    },
    indexSort() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    tab(x) {
      this.activeTab = x;
      this.dialogFormVisible = true;
    },
    // drawPie() {
    //   let self = this;
    //   this.$nextTick(() => {
    //     self.chart1.setOption({
    //       backgroundColor: "#030243",
    //       title: {
    //         text: "90.7%",
    //         textStyle: {
    //           fontSize: 15,
    //           fontFamily: "Microsoft Yahei",
    //           fontWeight: "normal",
    //           color: "#AFD1C6",

    //           rich: {
    //             a: {
    //               fontSize: 28
    //             }
    //           }
    //         },
    //         x: "center",
    //         y: "35%"
    //       },
    //       series: [
    //         {
    //           type: "liquidFill",
    //           radius: "80%",
    //           data: [0.3, 0.15, 0.07],
    //           backgroundStyle: {
    //             color: "#161A9B"
    //           },
    //           outline: {
    //             borderDistance: 10,
    //             itemStyle: {
    //               margin: 0,
    //               borderWidth: 4,
    //               borderColor: {
    //                 type: "linear",
    //                 x: 0,
    //                 y: 0,
    //                 x2: 0,
    //                 y2: 1,
    //                 colorStops: [
    //                   {
    //                     offset: 0,
    //                     color: "#55E2FE"
    //                   },
    //                   {
    //                     offset: 1,
    //                     color: "#0707FF"
    //                   }
    //                 ],
    //                 globalCoord: false
    //               }
    //             }
    //           },
    //           color: ["#824DE1", "#18C5FE", "#420BFF"],
    //           label: {
    //             normal: {
    //               formatter: ""
    //             }
    //           }
    //         }
    //       ]
    //     });
    //   });
    // },
    //旋转饼图
    drawPie() {
      let self = this;
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        self.chart1.setOption({
          title: {
            text: "25%\n完成率",
            x: "center",
            y: "center",
            textStyle: {
              fontWeight: "normal",
              color: "#fff",
              fontSize: "12",
            },
          },
          series: [
            {
              type: "pie",
              zlevel: 1,
              silent: true,
              /*
            radius
            饼图的半径。可以为如下类型：
            number：直接指定外半径值。
            string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
            Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
            */
              radius: ["98%", "97%"],
              hoverAnimation: false,
              color: "rgba(88,142,197,0.5)",
              // animation:false,    //charts3 no
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: [1],
            },
            {
              type: "pie",
              zlevel: 12,
              silent: true,
              radius: ["90%", "91%"],
              startAngle: 50,
              hoverAnimation: false,
              // animation:false,    //charts3 no
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: self._pie2(),
            },
            {
              type: "pie",
              zlevel: 3,
              silent: true,
              radius: ["88%", "87%"],
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: self._pie2(),
            },
            {
              type: "pie",
              zlevel: 4,
              silent: true,
              radius: ["84%", "83%"],
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: self._pie3(),
            },

            {
              name: "",
              type: "gauge",
              splitNumber: 30, //刻度数量
              min: 0,
              max: 100,
              radius: "73%", //图表尺寸
              center: ["50%", "50%"],
              startAngle: 90,
              endAngle: -269.9999,
              axisLine: {
                show: false,
                lineStyle: {
                  width: 10,
                  shadowBlur: 0,
                  color: [[1, "#B260F0"]],
                },
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: "auto",
                  width: 2,
                },
                length: 20,
                splitNumber: 5,
              },
              splitLine: {
                show: true,
                length: 12,
                lineStyle: {
                  color: "#B260F0",
                },
              },
              axisLabel: {
                show: false,
              },
              pointer: {
                //仪表盘指针
                show: 0,
              },
              detail: {
                show: 0,
              },
            },

            {
              name: "中间环形图",
              type: "pie",
              radius: ["35%", "55%"],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              color: ["#3B5DE2", "#142468"],

              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: [25, 75],
            },
          ],
        });
      });
    },
    drawBar(dataCalendar,dataNum) {
      let self = this;
      // var dataCalendar = [];

      // console.log(JSON.parse(dataCalendar));
      this.$nextTick(() => {
        console.log(self.dataCalendar);
        self.chart2.setOption({
          dataZoom: [
            {
              type: "slider",
              show: true, //flase直接隐藏图形
              xAxisIndex: [0],
              left: "9%", //滚动条靠左侧的百分比
              bottom: -5,
              borderColor: "#030243",
              start: 0, //滚动条的起始位置
              end: 50, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
              textStyle: {
                color: "#50FAF7",
              },
            },
          ],
          tooltip: {
            trigger: "axis",
          },
          xAxis: [ 
            {
              type: "category",
              data:dataCalendar,
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0.12)",
                },
              },

              axisLabel: {
                margin: 10,
                color: "#FFF",
                rotate: 45,
                textStyle: {
                  fontSize: 14,
                },
              },
            },
          ],
          grid: {
            top: "1%",
            right: "2%",
            left: "2%",
            bottom: "30%",
          },

          yAxis: {
            type: "value",
            show: false,
          },

          series: [
            {
              type: "bar",
              data: dataNum,
              //  [
              //   300,
              //   450,
              //   770,
              //   203,
              //   255,
              //   188,
              //   156,
              //   100,
              //   123,
              //   432,
              //   123,
              //   341,
              //   109,
              //   176,
              //   213,
              //   432,
              // ],
              barWidth: "10px",
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "#645FE0", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#CE61EE", // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                  barBorderRadius: [30, 30, 0, 0],
                  shadowColor: "rgba(0,160,221,1)",
                  shadowBlur: 4,
                },
              },
              // label: {
              //     normal: {
              //         show: true,
              //         lineHeight: 30,
              //         width: 80,
              //         height: 30,
              //         backgroundColor: 'rgba(0,160,221,0.1)',
              //         borderRadius: 200,
              //         position: ['-8', '-60'],
              //         distance: 1,
              //         formatter: [
              //             '    {d|●}',
              //             ' {a|{c}}     \n',
              //             '    {b|}'
              //         ].join(','),
              //         rich: {
              //             d: {
              //                 color: '#3CDDCF',
              //             },
              //             a: {
              //                 color: '#fff',
              //                 align: 'center',
              //             },
              //             b: {
              //                 width: 1,
              //                 height: 30,
              //                 borderWidth: 1,
              //                 borderColor: '#234e6c',
              //                 align: 'left'
              //             },
              //         }
              //     }
              // }
            },
          ],
        });
      });
      console.log(this.xAxis);
    },
    _pie2() {
      let dataArr = [];
      for (var i = 0; i < 8; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "rgba(88,142,197,0.5)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },

    _pie3() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "rgb(126,190,255)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },

    //鼠标事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。

    doing() {
      let option = this.chart1.getOption();
      console.log(option, "'''");
      option.series[3].startAngle = option.series[3].startAngle - 1;
      this.chart1.setOption(option);
    },

    // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem;
      const numberItems1 = this.$refs.numberItem1;
      const numberItems2 = this.$refs.numberItem2;
      const numberItems3 = this.$refs.numberItem3;
      const numberArr = this.orderNum.filter((item) => !isNaN(item));
      const numberArr1 = this.orderNum1.filter((item) => !isNaN(item));
      const numberArr2 = this.orderNum2.filter((item) => !isNaN(item));
      const numberArr3 = this.orderNum3.filter((item) => !isNaN(item));
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index];
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
      }
      for (let index = 0; index < numberItems1.length; index++) {
        const elem = numberItems1[index];
        elem.style.transform = `translate(-50%, -${numberArr1[index] * 10}%)`;
      }
      for (let index = 0; index < numberItems2.length; index++) {
        const elem = numberItems2[index];
        elem.style.transform = `translate(-50%, -${numberArr2[index] * 10}%)`;
      }
      for (let index = 0; index < numberItems3.length; index++) {
        const elem = numberItems3[index];
        elem.style.transform = `translate(-50%, -${numberArr3[index] * 10}%)`;
      }
    },
    // 处理总订单数字
    toOrderNum(num) {
      num = num.toString();
      // 把订单数变成字符串
      if (num.length < 6) {
        num = "0" + num; // 如未满八位数，添加"0"补位
        this.toOrderNum(num); // 递归添加"0"补位
      } else if (num.length === 6) {
        // 订单数中加入逗号
        // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
        this.orderNum = num.split("");
        this.orderNum1 = num.split(""); // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning("总量数字过大");
      }
      this.setNumberTransform();
    },
    toOrderNum1(num) {
      num = num.toString();
      // 把订单数变成字符串
      if (num.length < 6) {
        num = "0" + num; // 如未满八位数，添加"0"补位
        this.toOrderNum1(num); // 递归添加"0"补位
      } else if (num.length === 6) {
        // 订单数中加入逗号
        // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
        this.orderNum1 = num.split(""); // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning("总量数字过大");
      }
      this.setNumberTransform();
    },
    toOrderNum2(num) {
      num = num.toString();
      // 把订单数变成字符串
      if (num.length < 6) {
        num = "0" + num; // 如未满八位数，添加"0"补位
        this.toOrderNum2(num); // 递归添加"0"补位
      } else if (num.length === 6) {
        // 订单数中加入逗号
        // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
        this.orderNum2 = num.split(""); // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning("总量数字过大");
      }
      this.setNumberTransform();
    },
    toOrderNum3(num) {
      num = num.toString();
      // 把订单数变成字符串
      if (num.length < 6) {
        num = "0" + num; // 如未满八位数，添加"0"补位
        this.toOrderNum3(num); // 递归添加"0"补位
      } else if (num.length === 6) {
        // 订单数中加入逗号
        // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
        this.orderNum3 = num.split(""); // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning("总量数字过大");
      }
      this.setNumberTransform();
    },
  },
};
</script>
<style lang="scss">
.event_total {
  .event_num {
    width: 100%;
    padding-top: 0.25rem;
    .event_num_text {
      height: 0.6rem;
      .event_num_text_border:nth-child(even) {
        border: 1px solid #d462ee;
      }
      .box-item {
        position: relative;
        height: 0.3rem;
        font-size: 0.6rem;
        line-height: 0.3;
        text-align: center;
        list-style: none;
        color: #2d7cff;
        writing-mode: vertical-lr;
        text-orientation: upright;
        /*文字禁止编辑*/
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;
        /* overflow: hidden; */
      }
      /* 默认逗号设置 */
      .mark-item {
        width: 10px;
        height: 100px;
        margin-right: 5px;
        line-height: 10px;
        font-size: 48px;
        position: relative;
        & > span {
          position: absolute;
          width: 100%;
          bottom: 0;
          writing-mode: vertical-rl;
          text-orientation: upright;
        }
      }
      /*滚动数字设置*/
      .number-item {
        text-align: center;
        width: 0.49rem;
        margin-left: 0.1rem;
        height: 0.6rem;
        border: 1px solid #0b5bd6;
        color: #fff;
        font-size: 0.4rem;
        font-weight: 800;
        line-height: 0.6rem;
        & > span {
          position: relative;
          display: inline-block;
          margin-right: 0.1rem;
          width: 100%;
          height: 100%;
          writing-mode: vertical-rl;
          text-orientation: upright;
          overflow: hidden;
          & > i {
            font-style: normal;
            position: absolute;
            top: 0;
            left: 45%;
            transform: translate(-50%, 0);
            transition: transform 1s ease-in-out;
            letter-spacing: 0.1rem;
          }
        }
      }
      .number-item:last-child {
        margin-right: 0;
      }
      .event_num_text_border {
        text-align: center;
        width: 0.49rem;
        margin-left: 0.1rem;
        height: 0.7rem;
        border: 1px solid #0b5bd6;
        color: #fff;
        font-size: 0.33rem;
        font-weight: 800;
        line-height: 0.6rem;
      }
    }
    .event_total {
      width: 0.7rem;
      height: 0.8rem;
      margin-left: 0.1rem;
      text-align: center;
      line-height: 0.3rem;
      padding-top: 0.078rem;
      border-radius: 0.02rem;
      background: linear-gradient(
        to right,
        #3587da 0%,
        #19488c 30%,
        #0e397e 70%,
        #3587da 100%
      );
      span {
        color: #6bf1f4;
        font-size: 0.25rem;
      }
    }
    .event_compent {
      margin-left: 0.2rem;
      .event_compent_ {
        border: 1px solid #1b458f;
        margin-top: 0.03rem;
        .box-item {
          position: relative;
          height: 0.3rem;
          line-height: 0.3;
          text-align: center;
          list-style: none;
          color: #2d7cff;
          writing-mode: vertical-lr;
          text-orientation: upright;
          /* 文字禁止编辑 */
          -moz-user-select: none;
          /* 火狐 */
          -webkit-user-select: none;
          /* webkit浏览器 */
          -ms-user-select: none;
          /* IE10 */
          -khtml-user-select: none;
          /* 早期浏览器 */
          user-select: none;
          /* overflow: hidden; */
        }
        /* 默认逗号设置 */
        .mark-item {
          width: 10px;
          height: 100px;
          margin-right: 5px;
          line-height: 10px;
          font-size: 48px;
          position: relative;
          & > span {
            position: absolute;
            width: 100%;
            bottom: 0;
            writing-mode: vertical-rl;
            text-orientation: upright;
          }
        }
        /* 滚动数字设置 */
        .number-item {
          & > span {
            position: relative;
            display: inline-block;
            width: 100%;
            color: #fff;
            font-size: 0.1rem;
            height: 100%;
            writing-mode: vertical-rl;
            text-orientation: upright;
            overflow: hidden;
            & > i {
              font-style: normal;
              position: absolute;
              top: 2px;
              left: 45%;
              transform: translate(-50%, 0);
              transition: transform 1s ease-in-out;
              letter-spacing: 0.1rem;
            }
          }
        }
        .number-item:last-child {
          margin-right: 0;
        }
        .e_c {
          color: #fff;
          font-size: 0.1rem;
        }
        .evevt_ {
          text-align: center;
          span {
            width: 0.28rem;
            line-height: 0.25rem;
            height: 0.25rem;
            margin-left: 0.1rem;
            color: #fff;
            border: 1px solid #fff;
          }
        }
      }
    }
  }
  .event_chart {
    width: 100%;
    .event_chart_pie {
      width: 32%;
      height: 2.2rem;
    }
    .event_chart_bar {
      width: 68%;
      height: 2.2rem;
    }
  }
  .event_type {
    width: 95%;
    margin:auto;;
    height: 3.8rem;
    background: #082365;
    padding-top: 0.01rem;
    .event_type_left {
      width: 37%;
      height: 100%;
      .event_type_left_title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 0.4rem;
        width: 100%;
        margin-top: 0.02rem;
        background: #03123d;
        span {
          padding-left: 0.1rem;
          color: #fff;
          font-size: 0.2rem;
        }
        img {
          width: 0.2rem;
          height: 0.2rem;
        }
      }
      .event_type_left_text {
        overflow: hidden;
        height: 3.3rem;
        .event_type_left_text_ {
          width: 100%;
          padding: 0 0.1rem 0 0.1rem;
          margin-top: 0.082rem;
          text-align: left;
          color: #fff;
          font-size: 0.15rem;
        }
        .event_type_left_text_:hover {
          background: linear-gradient(
            to right,
            #3587da 0%,
            #01135b 30%,
            #02135b 70%,
            #3485d7 100%
          );
        }
      }
    }
    .event_type_right {
      width: 75%;
      height: 100%;
      display: flex;
      display: -webkit-flex;
      margin-top: 0.05rem;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: flex-start;
      .event_type_right_ {
        width: 2.35rem;
        margin-top: 0.01rem;
        padding: 0 0.01rem 0 0.02rem;
        height: 0.3rem;
        border: 1px solid #0807ba;
        margin-left: 0.04rem;
        background: #030243;
        span {
          color: #fff;
          font-size: 0.1rem;
        }
      }
    }
  }
  .evevt_tab {
    width: 100%;
    .evevt_tab_c {
      width: 1.8rem;
      height: 1.2rem;
      text-align: center;
      .evevt_tab_img {
        margin-left: 0.5rem;
        margin-top: 0.2rem;
        width: 0.6rem;
        height: 0.6rem;
        background: linear-gradient(
          to top,
          #2867b6 0%,
          #0c2a73 30%,
          #06246d 70%,
          #277ccf 100%
        );
        border-radius: 0.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
      .evevt_tab_text {
        width: 100%;
        height: 0.3rem;
        background: #02226d;
        margin-top: 0.2rem;
        span {
          color: #fff;
          font-size: 0.12rem;
        }
      }
      .actives {
        background: linear-gradient(
          to right,
          #6777fe 0%,
          #44aed8 30%,
          #50faf7 70%,
          #50faf7 100%
        );
        span {
          color: #03123d;
        }
      }
    }
  }
}
</style>

